Babel 的内置功能|前端工程化 | 前端进阶之旅

babel 最开始的名字叫 6to5，主要是做 es6 到 es5 语法的转换和 polyfill，后来在 4.0 时改名为了 babel。虽然从 6to5 改名到了 babel，但是做的事情并没有变，依然是从高版本语法和 api 转换成低版本的语法并自动 polyfill 缺少的 api。

babel 是怎么实现这些功能的呢？如果让我们基于插件机制实现 babel 内置的转换功能，该会如何设计呢？

# 从插件到 preset

# 映射关系

要实现转换，第一步要明确转换什么：划定一个集合放要转换的特性，再划定一个集合放转换到的目标特性，两者建立一一映射关系。就确定了我们要做哪些转换。

# exponentiation operator

比如乘方运算符，我们会用 Math.pow 来实现

let x = 10 ** 2;

x **= 3;

@前端进阶之旅: 代码已经复制到剪贴板

转换为

let x = Math.pow(10, 2);

x = Math.pow(x, 3);

@前端进阶之旅: 代码已经复制到剪贴板

# class

再比如 class，我们会用 function、prototype 来实现

class Test {
  constructor(name) {
    this.name = name;
  }

  logger() {
    console.log("Hello", this.name);
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

转换为

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Test = (function() {
  function Test(name) {
    _classCallCheck(